<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1322088_i5vs0r41499.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<style type="text/css">
		.container-fluid{
			overflow-y: auto;
		}
	</style>
	<body>
		<div class="container-fluid bg-white">
			<div class="goods-class">
				<div class="gc-header"><button @click="showAddClassModel" class="btn btn-info" type="button">新增</button></div>
				<div class="gc-item-box">
					<ul class="mp00">
						<li class="list-none" v-for="(item,index) in classList" :key="index">
							<div class="list-box flex">
								<div @click="showMainClass($event)" class="left-box"><span>{{item.name}}</span></div>
								<div class="right-box">
									<div class=" flex">
										<div @click="deleteClass(item,index)" class="right-box-btn"><i class="iconfont icon-delete"></i><span>删除</span></div>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
				
				
				<div class="add-model" v-if="showAddModel">
					<div @click="closeAddModel" class="closeModel"></div>
					<div class="am-box">
						<div class="am-h height40">新增计量单位</div>
						<div class="am-b">
							<div class="in-box-text flex"><span>计量名称</span><input v-model="ClassName" type="text" class="form-controls" value="" /></div>
						</div>
						<div class="am-f height40">
							<button @click="closeAddModel" type="button">取消</button>
							<button @click="addClass" type="button">确定</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<script src="js/jquery-v3-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layer/layer.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var height = document.documentElement.clientHeight;
				console.log(height);
				$(".container-fluid").css({"height":(height-34)+"px"})
			})
			
			$(window).resize(function(){
				var height = document.documentElement.clientHeight;
				$(".container-fluid").css({"height":(height-67)+"px"})
			})
			
			var vm = new Vue({
				el:".goods-class",
				data:{
					ClassName:"",
					showAddModel:false,
					classList:[
						{
							id:"01",
							name:"辆",
						},
						{
							id:"02",
							name:"盒",
						},
						{
							id:"03",
							name:"袋",
						},
						{
							id:"04",
							name:"箱",
						},
						{
							id:"04",
							name:"瓶",
						},
						{
							id:"04",
							name:"双",
						},
						{
							id:"04",
							name:"本",
						},
						{
							id:"04",
							name:"件",
						},
						{
							id:"04",
							name:"个",
						},
						
					]
				},
				methods:{
					showAddClassModel(){
						this.showAddModel = true;
					},
					closeAddModel(){
						this.ClassName = "";
						this.showAddModel = false;
					},
					addClass(){
						if(this.ClassName != ""){
							this.classList.push({
								id:"0009",
								name:this.ClassName
							})
							this.closeAddModel()
						}else{
							layer.msg('请输入计量单位名称！')
						}
					},
					deleteClass(item,num){//删除商品品牌
						layer.open({
							title:"删除提示",
							content: '确定要删除【'+ item.name +'】该计量单位？',
							btn: ['确定','取消'],
							yes: (index, layero)=>{
								this.classList.splice(num,1)
								layer.close(index)
							}
							,btn1: function(index, layero){
								console.log(0987);
							}
						});
					},
				}
			})

		</script>
	</body>
</html>
